
// **************
// Theme
// **************

#gn-components-theme(@theme-vars) {
    .gn-resources-pagination {
        .color-var(@theme-vars[main-variant-color]);
        .background-color-var(@theme-vars[main-variant-bg]);
        .border-top-color-var(@theme-vars[main-border-color]);
    }
}

// **************
// Layout
// **************

.gn-resources-panel-wrapper {
    position: fixed;
    width: 100%;
    display: flex;
    left: 0;
    pointer-events: none;
    * {
        pointer-events: auto;
    }
    z-index: 10;
}

.gn-resources-filter {
    position: relative;
    max-width: 400px;
    width: 100%;
    height: 100%;
    z-index: 10;
}

.gn-resource-detail {
    position: relative;
    max-width: 640px;
    width: 100%;
    height: 100%;
    margin-right: 0;
    margin-left: auto;
    z-index: 10;
}
.gn-resources-pagination {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0.25rem;
    z-index: 50;
    border-top-width: 1px;
    border-top-style: solid;
    .pagination {
        margin: 0;
    }
}

.gn-resource-detail {
    .gn-details-info-row {
        .gn-details-info-label {
            width: 200px;
        }
        .gn-details-info-value {
            max-width: calc(100% - 200px);
        }
    }
    .gn-details-info-label-link {
        padding: 0.25rem;
        font-weight: bold;
    }
}

.gn-main-event-container.gn-main-grid-loader {
    background-color: rgba(255, 255, 255, 0.2);
}

@media (max-width: 1400px) {
    .gn-resource-detail {
        max-width: 500px;
    }
}

@media (max-width: 968px) {
    .gn-resources-filter,
    .gn-resource-detail {
        max-width: 100%;
    }
}

.gn-resources-grid {
    &.gn-panel {
        height: 100%;

        .gn-card-grid-container {
            overflow: auto;
        }

        .gn-grid-container,
        .gn-card-grid,
        .gn-card-grid > div,
        .gn-card-grid > div > div,
        .gn-card-grid-container {
            min-height: auto;
            height: 100%;
        }

        .gn-resources-panel-wrapper {
            position: absolute;
        }

        .gn-resources-filter {
            width: 100%;
            max-width: 400px;
        }

        .gn-resource-detail {
            max-width: 100%;
        }

        .gn-details-panel section {
            box-shadow: none;
        }

        .gn-resources-pagination {
            z-index: 10;
        }

        .gn-card-list {
            max-width: 100%;
        }
    }
}
